<template>
  <div>
    <md-toolbar class="md-primary static-top">
      <div class="md-toolbar-section-start">
        <md-button class="md-icon-button md-txg-menubtn" @click="showNavigation = !showNavigation">
          <md-icon>menu</md-icon>
        </md-button>
        <span class="md-title">{{siteName}}</span>
      </div>

          <div class="md-toolbar-section-end md-xsmall-hide">
            <md-tabs :md-active-tab="topTabActive" class="md-primary md-transparent md-xsmall-hide" style="margin-right: 2rem">
              <md-tab
                :id="'tab-' + cate.tag"
                :md-label="cate.name"
                :to="'/' + cate.path"
                v-for="(cate, index) in cates">
                </md-tab>
            </md-tabs>
            <div class="user-info">
            <md-button to="/login" v-if="!auth">登录</md-button>
            <md-menu md-size="medium" md-align-trigger v-if="auth">
                <md-avatar @click="logout" md-menu-trigger class="avatar">
                  <img :src="user.avatar" :alt="user.name">
                </md-avatar>

                <md-menu-content>
                  <md-menu-item to="/favorites">我的收藏</md-menu-item>
                  <md-menu-item @click="logout">退出登录</md-menu-item>
                </md-menu-content>
            </md-menu>
            </div>
          </div>
    </md-toolbar>
    <md-drawer :md-active.sync="showNavigation" style="height:100vh;">
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">{{ siteName }}</span>
      </md-toolbar>

      <md-list>
        <md-list-item to="/">
          <md-icon>move_to_inbox</md-icon>
          <span class="md-list-item-text">首页</span>
        </md-list-item>

        <md-list-item to="/touxiang">
          <md-icon>send</md-icon>
          <span class="md-list-item-text">头像</span>
        </md-list-item>

        <md-list-item to="/bizhi">
          <md-icon>delete</md-icon>
          <span class="md-list-item-text">壁纸</span>
        </md-list-item>

        <md-list-item to="/meitu">
          <md-icon>error</md-icon>
          <span class="md-list-item-text">美图</span>
        </md-list-item>
      </md-list>
    </md-drawer>
    <div class="search-box md-xsmall-hide" :style="topBannerStyle" v-if="$route.path == '/'">
      <md-autocomplete
        class="search"
        v-model="selectedEmployee"
        :md-options="employees"
        md-layout="box"
        @md-changed="search"
        :md-open-on-focus="false"
        >
        <label>搜索</label>
      </md-autocomplete>
    </div>
    <div class="md-layout md-gutter md-alignment-top-center md-xsmall-hide" style="margin-top: 128px; margin-left: 0; margin-right: 0;" v-else-if="$route.name == 'Category'">
      <div class="md-layout-item md-size-75">
        <md-tabs>
          <md-tab md-label="全部" :to="'/' + $route.params.category"></md-tab>
          <md-tab :md-label="tag.name" v-for="(tag, index) in tags" :to="'/' + $route.params.category + '/' + tag.url"></md-tab>
        </md-tabs>
      </div>
    </div>
    <div style="margin-top: 128px;" v-else>

    </div>
    <router-view v-on:reload="toggleLoading" v-on:show-msg="showMsg" v-on:updateTags="updateTags"></router-view>
    <Message :show.sync="msgShow" :type="msgType" v-on:close="msgShow = false" :msgs="msg" :timeOut="timeOut" :isAutoClose="autoClose" />
    <!--底部导航-->
    <md-bottom-bar class="md-accent txg-bottom" md-type="fixed" md-sync-route>
      <md-bottom-bar-item to="/" md-label="首页" md-icon="home"></md-bottom-bar-item>
      <md-bottom-bar-item to="/explore" md-label="发现" md-icon="pages"></md-bottom-bar-item>

      <md-bottom-bar-item to="/hot" md-label="热门" md-icon="pages"></md-bottom-bar-item>

      <md-bottom-bar-item to="/favorite" md-label="收藏" md-icon="favorite"></md-bottom-bar-item>
    </md-bottom-bar>
    <the-static-bottom />
  </div>
</template>
<script>
  import TheBase from '@/components/layouts/TheBase'
  import TheHeader from '@/components/layouts/TheHeader'
  import TheStaticBottom from '@/components/layouts/TheStaticBottom'
  import { mapState } from 'vuex'
  export default {
    name: 'App',
    components: {
      TheBase,
      TheHeader,
      TheStaticBottom
    },
    computed: {
       ...mapState([
        // 映射 this.auth 为 store.state.auth
        'auth',
        // 映射 this.user 为 store.state.user
        'user'
      ])
    },
    data: () => ({
      showNavigation: false,
      // showSidepanel: false,
      siteName: '头像收藏夹(ง •̀_•́)ง',
      menuVisible: false,
      loading: false,
      isLogined: false,
      searchBoxVisible: true,
      employees: [
      ],
      cates: [
        {
          name: '最新',
          tag: 'index',
          path: ''
        },
        {
          name: '热门',
          tag: 'hot',
          path: 'hot'
        },
        {
          name: '发现',
          tag: 'explore',
          path: 'explore'
        },
        {
          name: '头像',
          tag: 'touxiang',
          path: 'touxiang'
        },
        {
          name: '壁纸',
          tag: 'bizhi',
          path: 'bizhi'
        },
        {
          name: '唯美图',
          tag: 'meitu',
          path: 'meitu'
        }
      ],
      tags: [
      ],
      selectedEmployee: null,
      msg: {}, // 消息
      msgType: '', // 消息类型
      msgShow: false, // 是否显示消息，默认不显示
      timeOut: 3000,
      autoClose: true,
      topTabActive: 'index'
    }),
    watch: {
      '$route': 'hideNavigation'
    },
    beforeRouteUpdate (to, from, next) {
      if (to.path == '/') {
        this.searchBoxVisible = true
      } else {
        this.searchBoxVisible = false
      }
      if (to !== from) {
        this.hideNavigation()
      }
      next()
    },
    created() {
      this.isLogin()
      document.title = '头像阁 - 我的头像收藏夹(ง •̀_•́)ง'
      this.setTopBanner()
    },
    methods: {
      toggleMenu() {
        this.menuVisible = !this.menuVisible
      },
      hideNavigation() {
        this.showNavigation = false
        window.scrollTop = 0
        // 解析路由
        if (this.$route.name == 'Category') {
          this.topTabActive = 'tab-' + this.$route.params.category
        } else {
          this.topTabActive = 'tab-' + this.$route.name.toLowerCase()
        }
        //this.topTabActive = 'tab-' +
      },
      toggleLoading() {
        this.loading = !this.loading
        this.menuVisible = false
      },
      search(keyWord) {
        console.log(keyWord);
      },
      isLogin() {
        if( this.$store.state.auth ) {
          this.user = this.$store.state.user
          this.isLogined = true
        } else {
          this.isLogined = false
        }
      },
      logout() {
        this.$store.dispatch('logout')
      },
      showMsg(msg, type = 'warning') {
        this.msg = msg
        this.msgType = type
        this.msgShow = false

        this.$nextTick(() => {
          this.msgShow = true
        })
      },
      setTopBanner() {
        this.topBannerStyle = {
          backgroundImage: 'url(\'/static/img/banner.jpg\')',
          backgroundPosition: 'center'
        }
      },
      updateTags(tags) {
        this.tags = tags
      }
    }

  }
</script>

<style lang="scss">
  $fa-font-path: "~font-awesome/fonts/";
  @import "~font-awesome/scss/font-awesome";
  .md-progress-spinner.md-theme-default.md-accent .md-progress-spinner-circle {
    color: #fff;
  }
  .static-top {
    position: fixed !important;
    top: 0;
    z-index: 6 !important;
  }
  .search-box {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    padding: 13rem 0 7rem;
  }
  .user-info {
    margin-left: 2rem;
    .avatar {
      cursor: pointer;
    }
  }
  .search {
    max-width: 500px;
    align-self:flex-end;
  }
@media screen and (max-width: 600px) {
  .md-txg-menubtn {
    display: inline-block;
  }
}
@media screen and (min-width: 600px) {
  .md-txg-menubtn {
    display: none !important;
  }
}
.txg-bottom {
  display: none;
}
@media screen and (max-width: 600px) {
  .txg-bottom {
    display: block;
    position: fixed;
    bottom: 0;
  }
  .md-xsmall-hide.md-toolbar-section-end {
    display: none !important;
  }
  .md-xsmall-hide {
    display: none !important;
  }
}
</style>
